<template>
	<div style="flex: 1; height: 92vh">
		<div
			style="display: flex; margin-left: 10px; margin-top: 10px; padding-bottom: 10px"
			@click="goToDataDetail">
			<div>
				<CardBox>
					<CardData type="进口压力" data="10"></CardData>
					<CardData type="出口压力" data="10"></CardData>
					<CardData type="泵体温度" data="10"></CardData>
					<CardData type="轴承温度" data="10"></CardData>
				</CardBox>
				<EngineList :data-list="engieDate[0]" :clx="false" :wz="false" :tj="false"></EngineList>
			</div>
			<div style="flex: 1">
				<div style="display: flex; justify-content: space-around; width: 92%; flex-wrap: wrap">
					<CargoOilTanks
						v-for="(item, index) in CargoOilTanksData"
						:data-list="item"
						:key="index"
						:isShow="index == 0 || index == 5"></CargoOilTanks>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import con2 from '@/assets/image/con2.png'
// 组件
// import CardData from './component/layout/cardData.vue'
import { onMounted, ref, reactive, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import EngineList from './component/models/engineList.vue'
import CargoOilTanks from './component/models/CargoOilTanks.vue'
import { getRandomInRange } from '@/utils/utils.js'
// 动态数据
import { getEngieDate, engieDate, CargoOilTanksData } from '@/mixins/globalParam.js'
let { path } = useRoute()
let router = useRouter()
let timer = ref(null)
onMounted(() => {
	// getEngieDate(timer)
})
onUnmounted(() => {
	// clearInterval(timer.value)
})
</script>

<style lang="scss" scoped>
.content {
	font-size: 32px;
	text-align: center;
	line-height: 10rem;
}
</style>
